<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-show并未删除标签，只是给标签增加和删除display：none的属性 -->
        <!-- v-show 效率高但安全性低 -->
        <p v-show="flag" style="background-color: aqua;">元素1</p>
        <p v-show="!flag" style="background-color: lightcoral;">元素2</p>
        <input type="button" value="显示|隐藏" @click="flag=!flag">
        <hr>

        <!--
             v-if是删除标签
             v-if 效率偏低但安全性高 
        -->
        <p v-if="flag" style="background: lightgreen;">元素1</p>
        <p v-if="!flag" style="background: lightseagreen;">元素2</p>
        <hr>

        <p v-show="''">''</p>
        <p v-show="0">0</p>
        <p v-show="null">null</p>
        <p v-show="undefined">undefined</p>
        <!-- 判断栈存的值，引用数据存的是地址，空对象和数组也有地址 -->
        <p v-show="{}">{}</p>
        <p v-show="[]">[]</p>

        <hr>
        <p>{{age}}</p>
        <p v-if="age<18">
            <span>少年</span>
            <span>少年</span>
        </p>
        <p v-else-if="age<50">
            <span>青年</span>
            <span>青年</span>
        </p>
        <p v-else>老年</p>


    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            flag:true,
            age:10
        }
    });
</script>
</html>